<template>
    <div id="data-information" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <div v-if="!isTrack" class="center-con-l">
                                        <div class="same-s">
                                            <span class="same-s-t">用户列表</span>
                                            <el-input class="search-s" v-model="transferVal" placeholder="搜索" @change="searchChange" :suffix-icon="Search" />
                                            <el-radio-group class="same-s-r" v-model="radioVal" @change="radioChange">
                                                <template v-for="item in radioGroup" :key="item.id">
                                                    <el-radio :label="item.id">
                                                        {{ item.name }} 
                                                        <span v-if="item.status === 0" style="margin-left: 10px;color: #F56C6C;">离线</span>
                                                        <span v-else style="margin-left: 10px;color: #67C23A;"> 在线 </span>
                                                    </el-radio>
                                                </template>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    <div v-if="!isTrack" class="center-con-c">
                                        <div class="same-c-s">
                                            <div class="forbid-s" v-if="equipStatus === 0">
                                                <span>设备未启动</span>
                                            </div>
                                            <el-row style="padding: 6px;" :gutter="6">
                                                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
                                                    <div @click="instructionClick('3', statusInfo.flash )" class="mb20-d">
                                                        <div class="mb20-d-b">
                                                            <template v-if="equipStatus === 1">
                                                                <div v-if="statusInfo.flash" class="pro-s" style="background-color: #409EFF;">已开启</div>
                                                                <div v-else class="pro-s" style="background-color: #F56C6C;">关闭</div>
                                                            </template>
                                                            <template v-if="equipStatus === 0">
                                                                <div class="pro-s" style="background-color: #909399;">未检测</div>
                                                            </template>
                                                            <img src="./img/dg2.png">
                                                            <p>灯光</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
                                                    <div @click="instructionClick('7' , statusInfo.cam)" class="mb20-d">
                                                        <div class="mb20-d-b">
                                                            <template v-if="equipStatus === 1">
                                                                <div v-if="statusInfo.cam" class="pro-s" style="background-color: #409EFF;">已开启</div>
                                                                <div v-else class="pro-s" style="background-color: #F56C6C;">关闭</div>
                                                            </template>
                                                            <template v-if="equipStatus === 0">
                                                                <div class="pro-s" style="background-color: #909399;">未检测</div>
                                                            </template>
                                                            <img src="./img/sx2.png" />
                                                            <p>摄像</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
                                                    <div @click="instructionClick('1' , statusInfo.gps)" class="mb20-d">
                                                        <div class="mb20-d-b">
                                                            <template v-if="equipStatus === 1">
                                                                <div v-if="statusInfo.gps" class="pro-s" style="background-color: #409EFF;">已开启</div>
                                                                <div v-else class="pro-s" style="background-color: #F56C6C;">关闭</div>
                                                            </template>
                                                            <template v-if="equipStatus === 0">
                                                                <div class="pro-s" style="background-color: #909399;">未检测</div>
                                                            </template>
                                                            <img src="./img/gps2.png" />
                                                            <p>GPS</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
                                                    <div @click="instructionClick('12' , statusInfo.laser)" class="mb20-d">
                                                        <div class="mb20-d-b">
                                                            <template v-if="equipStatus === 1">
                                                                <div v-if="statusInfo.laser" class="pro-s" style="background-color: #409EFF;">已开启</div>
                                                                <div v-else class="pro-s" style="background-color: #F56C6C;">关闭</div>
                                                            </template>
                                                            <template v-if="equipStatus === 0">
                                                                <div class="pro-s" style="background-color: #909399;">未检测</div>
                                                            </template>
                                                            <img src="./img/jg2.png" />
                                                            <p>激光</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
                                                    <div @click="instructionClick('19' , statusInfo.warningLight)" class="mb20-d">
                                                        <div class="mb20-d-b">
                                                            <template v-if="equipStatus === 1">
                                                                <div v-if="statusInfo.warningLight" class="pro-s" style="background-color: #409EFF;">已开启</div>
                                                                <div v-else class="pro-s" style="background-color: #F56C6C;">关闭</div>
                                                            </template>
                                                            <template v-if="equipStatus === 0">
                                                                <div class="pro-s" style="background-color: #909399;">未检测</div>
                                                            </template>
                                                            <img src="./img/js2.png" />
                                                            <p>警示灯</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20">
                                                    <div @click="instructionClick('15' , false)" class="mb20-d">
                                                        <div class="mb20-d-b">
                                                            <template v-if="equipStatus === 1">
                                                                <div class="pro-s" style="background-color: #67C23A;">可使用</div>
                                                            </template>
                                                            <template v-if="equipStatus === 0">
                                                                <div class="pro-s" style="background-color: #909399;">未检测</div>
                                                            </template>
                                                            <img src="./img/pz2.png" />
                                                            <p>拍照</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20 mb20-d-o">
                                                    <div @click="instructionClick('5')" class="mb20-d">
                                                        <div class="mb20-d-b">
                                                            <template v-if="equipStatus === 1">
                                                                <div class="pro-s" style="background-color: #67C23A;">可使用</div>
                                                            </template>
                                                            <template v-if="equipStatus === 0">
                                                                <div class="pro-s" style="background-color: #909399;">未检测</div>
                                                            </template>
                                                            <img src="./img/wz.png" />
                                                            <p>下发文字信息</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb20 mb20-d-o">
                                                    <div @click="instructionClick('17' , statusInfo.wifi)" class="mb20-d">
                                                        <div class="mb20-d-b">
                                                            <template v-if="equipStatus === 1">
                                                                <div class="pro-s" style="background-color: #67C23A;">可使用</div>
                                                            </template>
                                                            <template v-if="equipStatus === 0">
                                                                <div class="pro-s" style="background-color: #909399;">未检测</div>
                                                            </template>
                                                            <img src="./img/wifi2.png" />
                                                            <p>WIFI</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                    <div v-if="!isTrack" class="center-con-r">
                                        <div class="same-s">
                                            <span class="same-s-t">历史记录</span>
                                            <el-row style="padding: 6px;" :gutter="6">
                                                <el-col @click="viewDetail('1')" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20-o">
                                                    <div class="mb20-r">
                                                        <div class="mb20-r-b">
                                                            <img src="./img/sp.png" />
                                                            <p>视频</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col @click="viewDetail('2')" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20-o">
                                                    <div class="mb20-r ps-mb20-r">
                                                        <div class="forbid-s" v-if="equipStatus === 0">
                                                            <span>设备未启动</span>
                                                        </div>
                                                        <div class="mb20-r-b">
                                                            <img src="./img/sx.png" />
                                                            <p>实时视频</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col @click="viewDetail('3')" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20-o">
                                                    <div class="mb20-r">
                                                        <div class="mb20-r-b">
                                                            <img src="./img/gj.png" />
                                                            <p>轨迹</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col @click="viewDetail('4')" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20-o">
                                                    <div class="mb20-r">
                                                        <div class="mb20-r-b">
                                                            <img src="./img/tp.png" />
                                                            <p>图片</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col @click="viewDetail('5')" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20-o">
                                                    <div class="mb20-r">
                                                        <div class="mb20-r-b">
                                                            <img src="./img/sb.png" />
                                                            <p>识别结果</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col @click="viewDetail('6')" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20-o">
                                                    <div class="mb20-r">
                                                        <div class="mb20-r-b">
                                                            <img src="./img/gj2.png" />
                                                            <p>告警信息</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <template v-if="!isTrack && equipStatus === 1">
            <v-map
                class="w-h-100" 
                :detailInfo="detailInfo"
                :isUseDialog="isUseDialog"
            ></v-map>
        </template>
        <template v-if="!isTrack && equipStatus === 0">
            <v-map-t class="w-h-100"  />
        </template>
        <template v-if="isTrack">
            <v-map-o
                class="w-h-100" 
                :detailInfo="detailTrackInfo"
                :isUseDialog="isTrackDialog"
                @exitClick="exitClick"
            ></v-map-o>
        </template>
        <template v-if="drawerNum === '1'">
            <history-video
                :drawerVisible="drawerOne"
                :isUseDialog="isUseDialog"
                @handleVideoClose="handleVideoClose"
            />
        </template>
        <template v-if="drawerNum === '2'">
            <video-record
                :drawerVisible="drawerTwo"
                :isUseDialog="isUseDialog"
                @handleRecordClose="handleRecordClose"
            />
        </template>
        <template v-if="drawerNum === '3'">
            <history-track
                :drawerVisible="drawerThree"
                :isUseDialog="isUseDialog"
                @handleTrackClose="handleTrackClose"
            />
        </template>
        <template v-if="drawerNum === '4'">
            <history-img
                :drawerVisible="drawerFour"
                :isUseDialog="isUseDialog"
                @handleImgClose="handleImgClose"
            />
        </template>
        <template v-if="drawerNum === '5'">
            <history-analysis
                :drawerVisible="drawerFive"
                :isUseDialog="isUseDialog"
                @handleAnaClose="handleAnaClose"
            />
        </template>
        <template v-if="drawerNum === '6'">
            <history-alarm
                :drawerVisible="drawerSix"
                :isUseDialog="isUseDialog"
                @handleAlarmClose="handleAlarmClose"
            />
        </template>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive , toRaw , toRefs } from 'vue'
import { ElMessage , ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import VMap from './component/v-map.vue'
import VMapO from './component/v-map-o.vue'
import VMapT from './component/v-map-t.vue'
import HistoryTrack from './history-Info/history-track.vue'
import HistoryVideo from './history-Info/history-video.vue'
import VideoRecord from './history-Info/video-record.vue'
import HistoryImg from './history-Info/history-img.vue'
import HistoryAnalysis from './history-Info/history-analysis.vue'
import HistoryAlarm from './history-Info/history-alarm.vue'
import { 
    SafetyHatDropDownList , 
    SafetyHatQueryHelmetInfo , 
    SafetyHatQueryHistoryTraceDetail , 
    SafetyHatOperateDeviceAction ,
    SafetyHatRelayWord ,
} from '/@/api/its/its.ts'
export default defineComponent( {
    name: 'data-information',
    components: {
        VMap,
        HistoryTrack,
        VMapO,
        VMapT,
        HistoryVideo,
        VideoRecord,
        HistoryImg,
        HistoryAnalysis,
        HistoryAlarm,
    },
    setup(props){
        const drawerOne = ref(false)
        const drawerTwo = ref(false)
        const drawerThree = ref(false)
        const drawerFour = ref(false)
        const drawerFive = ref(false)
        const drawerSix = ref(false)

        const radioGroup = ref()
        const radioVal = ref()
        const detailInfo = ref('')
        const statusInfo:any = ref({})
        const isUseDialog = ref('')
        const transferVal = ref()
        const showTitle = ref('')
        const drawerNum = ref('')
        const isTrack = ref(false)
        const isTrackDialog = ref('')
        const detailTrackInfo = ref('')
        const equipStatus = ref(1)

        /*** viewDetail 点击查看详情 */
        const viewDetail = (val:any) => {
            drawerNum.value = val
            if(isUseDialog.value !== ''){
                switch (val){
                    case '1':
                        showTitle.value = '历史视频';
                        drawerOne.value = true
                        break;
                    case '2':
                        showTitle.value = '监控录制';
                        if(equipStatus.value === 1){
                            drawerTwo.value = true
                        }else{
                            ElMessage({
                                type: 'info',
                                message: '设备未启动，功能无法使用',
                            })
                        }
                        break;
                    case '3':
                        showTitle.value = '历史轨迹';
                        drawerThree.value = true
                        break;
                    case '4':
                        showTitle.value = '历史图片';
                        drawerFour.value = true
                        break;
                    case '5':
                        showTitle.value = '识别结果';
                        drawerFive.value = true
                        break;
                    case '6':
                        showTitle.value = '报警信息';
                        drawerSix.value = true
                        break;
                    case '7':
                        showTitle.value = '设备状态';
                        break;
                }
            }else{
                ElMessage({
                    type: 'error',
                    message: '服务器暂停服务，稍后请重新刷新',
                })
            }
        }

        /*** instructionClick 下发指令 */
        const instructionClick = async(val:any, b?:Boolean) => {
            if(val !== '5'){
                let param:any = {}
                param.helmetId = isUseDialog.value
                param.operationCode = val
                b ? param.operationType = '0' : param.operationType = '1'
                instrucFun(param)
            }else{
                ElMessageBox.prompt('请输入需要下发的信息', '信息指令下发', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                })
                .then(async ({ value }) => {
                    let param:any = {}
                    let setArr = []
                    setArr.push(isUseDialog.value)
                    param.helmetIds = setArr
                    param.word = value
                    await SafetyHatRelayWord(param)
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '下发指令已取消',
                    })
                })
            }
        }
        /*** instrucFun 指令函数 */
        const instrucFun = async(val:Object) => {
            console.log(val,'val')
            let res = await SafetyHatOperateDeviceAction(val)
            if(res.success){
                ElMessage({
                    type: 'success',
                    message: '指令下发成功',
                    duration: 1500,
                    onClose: () => {
                        getDetailInfo(toRaw(isUseDialog.value))
                    }
                })
            }else{
                ElMessage({
                    type: 'error',
                    message: '指令下发失败',
                    duration: 1500
                })
            }
        }

        /*** handleTrackClose 历史轨迹关闭事件 */
        const handleTrackClose = (val:any) => {
            drawerThree.value = false
            drawerNum.value = ''
            if(JSON.parse(val) !== ''){
                getHistoryInfo(JSON.parse(val))
            }
        }
        /*** handleVideoClose 历史视频关闭事件 */
        const handleVideoClose = () => {
            drawerOne.value = false
            drawerNum.value = ''
        }
        /*** handleRecordClose 监控录制关闭事件 */
        const handleRecordClose = () => {
            drawerTwo.value = false
            drawerNum.value = ''
        }
        /*** handleImgClose 历史图片关闭事件 */
        const handleImgClose = () => {
            drawerFour.value = false
            drawerNum.value = ''
        }
        /*** handleAnaClose 识别结果关闭事件 */
        const handleAnaClose = () => {
            drawerFive.value = false
            drawerNum.value = ''
        }
        /*** handleAlarmClose 报警信息关闭事件 */
        const handleAlarmClose = () => {
            drawerSix.value = false
            drawerNum.value = ''
        }

        /*** searchChange 搜索 */
        const searchChange = (val:any) => {
            getInfomationList(val)
        }

        /*** getInfo 获取设备下拉列表 */
        const getInfomationList = async ( n?:String ) => {
            let param:any = {}
            if(n) param.name = n
            else param.name = ''
            let res = await SafetyHatDropDownList(param)
            if(res.success && res.data.length){
                radioGroup.value = res.data
                radioVal.value = res.data[0].id
                equipStatus.value = res.data[0].status
                getDetailInfo(res.data[0].id)
            }
        }

        /*** getDetailInfo 获取详细信息 */
        const getDetailInfo = async (i:any) => {
            let param:any = {}
            param.helmetId = i
            let res = await SafetyHatQueryHelmetInfo(param)
            if(res.success){
                statusInfo.value = res.data
                isUseDialog.value = res.data.helmeTId
                detailInfo.value = JSON.stringify(res.data)
            }
        }

        /*** getHistoryInfo 获取历史数据信息 */
        const getHistoryInfo = async (val:any) => {
            switch (val.nowState){
                case '3':
                    let param:any = {}
                    param.helmetId = val.helmetId
                    param.sidGroup = val.sidGroup
                    let res = await SafetyHatQueryHistoryTraceDetail(param)
                    if(res.success){
                        console.log(res.data.gpsTraceDatas,'data')
                        let lngLat:any = []
                        res.data.gpsTraceDatas.map((i:any) => {
                            let setArr = []
                            setArr[0] = i.lng
                            setArr[1] = i.lat
                            lngLat.push(setArr)
                        })
                        isTrack.value = true
                        isTrackDialog.value = res.data.gpsTraceDatas.sidGroup
                        detailTrackInfo.value = JSON.stringify(lngLat)
                    }
                    console.log(res,'res')
                    break;
            }
        }

        /*** exitClick 循迹退出事件 */
        const exitClick = () => {
            console.log('退出')
            isTrack.value = false
            isTrackDialog.value = ''
            detailTrackInfo.value = ''
        }

        /*** radioChange 单选框改变事件 */
        const radioChange = (val:any) => {
            detailInfo.value = ''
            isUseDialog.value = val
            let getArr = toRaw(radioGroup.value).filter(( i:any ) => {
                return val === i.id
            })
            equipStatus.value = getArr[0].status
            getDetailInfo(val)
        }

        onMounted(() => {
            getInfomationList()
        })

        return {
            drawerOne,
            drawerTwo,
            drawerThree,
            drawerFour,
            drawerFive,
            drawerSix,

            detailInfo,

            statusInfo,

            radioGroup,
            radioVal,
            equipStatus,
            radioChange,
            isUseDialog,
            transferVal,
            Search: Search,
            searchChange,
            viewDetail,
            instructionClick,
            showTitle,
            drawerNum,
            isTrack,
            isTrackDialog,
            detailTrackInfo,

            exitClick,
            handleTrackClose,
            handleVideoClose,
            handleRecordClose,
            handleImgClose,
            handleAnaClose,
            handleAlarmClose,
        }
    },
} )
</script>
<style scoped lang="scss">
    #data-information {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-input__wrapper){
            width: 100%!important;
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        :deep(.el-drawer__title){
            font-weight: bold;
        }
        :deep(.el-drawer){
            background-color: #F8F8F8;
            padding-bottom: 10px;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .mb20-d-o{
            margin-top: 6px!important;
        }
        .mb20{
            height: 70px;
            margin-bottom: 0px!important;
            .mb20-d{
                cursor:pointer;
                background-color: rgba($color: #FFFFFF, $alpha: 1);
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .mb20-d-b{
                    position: relative;
                    .pro-s{
                        color: #FFFFFF;
                        width: 40px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        font-size: 12px!important;
                        position: absolute;
                        top: 5px;
                        right: 5px;
                    }
                    img{
                        display: block;
                        width: 30px;
                        height: 30px;
                        margin: auto;
                    }
                    p{
                        color: #409EFF;
                        text-align: center;
                        margin-top: 6px;
                    }
                }
            }
        }
        .mb20-o{
            cursor:pointer;
            height: 70px;
            margin-bottom: 6px!important;
            .mb20-r{
                background-color: rgba($color: #409EFF, $alpha: 1);
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .mb20-r-b{
                    img{
                        display: block;
                        width: 30px;
                        height: 30px;
                        margin: auto;
                    }
                    p{
                        color: #FFFFFF;
                        text-align: center;
                        margin-top: 6px;
                    }
                }
            }
            .ps-mb20-r{
                position: relative;
                .forbid-s{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    background-color: rgba($color: #141414, $alpha: 0.6);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    span{
                        color: #FFFFFF;
                        font-weight: bold;
                        display: block;
                        width: 100%;
                        text-align: center;
                    }
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
        .same-s-t{
            display: block;
            width: 100%;
            color: #FFFFFF;
            border-bottom: 1px solid #E5EAF3;
            padding: 10px 8px;
            font-weight: bold;
            background-color: #409EFF;
        }
        .center-con-l{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            height: 100%;
            width: 18%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 10px;
            .same-s{
                width: 100%;
                height: 98%;
                background-color: rgba($color: #FFFFFF, $alpha: 1);
                overflow: hidden;
                .search-s{
                    height: 32px!important;
                    width: 90%;
                    display: block;
                    margin: 10px auto;
                }
                .same-s-r{
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: flex-start;
                    height: 94%;
                    overflow-y: auto;
                    :deep(.el-radio){
                        margin-right: 0!important;
                        margin-left: 8px!important;
                    }
                }
                :deep(.el-radio-group){
                    align-items: flex-start!important;
                }
            }
        }
        .center-con-c{
            position: absolute;
            bottom: 0;
            z-index: 2;
            width: 100%;
            padding-left: 8%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            .same-c-s{
                width: 74%;
                margin: auto;
                text-align: center;
                background-color: #409EFF;
                position: relative;
                .forbid-s{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    background-color: rgba($color: #141414, $alpha: 0.6);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    span{
                        color: #FFFFFF;
                        font-weight: bold;
                    }
                }
            }
        }
        .center-con-r{
            position: absolute;
            top: 0;
            right: 0;
            z-index: 3;
            height: 100%;
            width: 10%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 10px;
            .same-s{
                width: 100%;
                height: 98%;
                background-color: rgba($color: #FFFFFF, $alpha: 1);
                overflow: hidden;
                position: relative;
            }
        }
    }
</style>